<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="baiduTemplate.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#nav {
				width: 100%;
				height: 80px;
				background-image: linear-gradient(to bottom, #ccc, white);
			}
			
			#nav img {
				width: 80px;
				float: left;
			}
			
			#nav h1 {
				line-height: 80px;
			}
			
			#tianjia {
				width: 333px;
				height: 466px;
				background: deepskyblue;
				border: 1px solid black;
				position: absolute;
				left: 500px;
				top: 100px;
				display: none;
			}
			
			#tianjia p {
				/*text-align: center;*/
				margin-top: 10px;
			}
			
			#tianjia p span {
				display: inline-block;
				width: 100px;
				text-align: right;
				color: white;
			}
			
			#liulan {
				width: 100%;
			}
			
			#liulan table,
			tr {
				width: 100%;
			}
			
			#liulan th {
				width: 100px;
				text-align: center;
			}
			
			#liulan td {
				text-align: center;
			}
			
			#liulan td img {
				width: 20px;
			}
			
			.aaa {
				display: none;
			}
			
			.grxx {
				padding-left: 850px;
			}
			
			.grxx button {
				width: 30px;
				height: 20px;
			}
			
			#grxx1 {
				width: 100px;
				height: 100px;
				background: mediumspringgreen;
				position: absolute;
				right: 40px;
				top: 65px;
				display: none;
			}
			
			#grxx1 p {
				text-align: center;
			}
			
			#xgx {
				width: 333px;
				height: 466px;
				background: springgreen;
				border: 1px solid black;
				position: absolute;
				left: 500px;
				top: 100px;
				display: none;
			}
			
			#xgx p {
				/*text-align: center;*/
				margin-top: 10px;
			}
			
			#xgx p span {
				display: inline-block;
				width: 100px;
				text-align: right;
				color: white;
			}
		</style>
	</head>

	<body>
		<div id="nav">
			<img src="img/01.jpg" />
			<h1>星辰图书管理系统<span class="grxx">个人信息</span></h1>
		</div>
		<input type="button" name="" id="btn" value="添加" style="width: 100px;height: 34px;font-size: 20px;" />
		<input type="button" name="" id="f5" value="刷新" style="width: 100px;height: 34px;font-size: 20px;" />
		<div id="tianjia">
			<p><span>书名：</span><input type="text" name="booksname" id="booksname" value="" /></p>
			<p><span>价格：</span><input type="text" name="cost" id="cost" value="" /></p>
			<p><span>会员价：</span><input type="text" name="vipcost" id="vipcost" value="" /></p>
			<p><span>校园价：</span><input type="text" name="schoolcost" id="schoolcost" value="" /></p>
			<p><span>评分：</span><input type="text" name="grade" id="grade" value="" /></p>
			<p><span>作者：</span><input type="text" name="author" id="author" value="" /></p>
			<p><span>出版社：</span><input type="text" name="press" id="press" value="" /></p>
			<p><span>上架时间：</span><input type="text" name="toptime" id="toptime" value="" /></p>
			<p><span>出版时间：</span><input type="text" name="outtime" id="outtime" value="" /></p>
			<p><span>版本：</span><input type="text" name="release" id="release" value="" /></p>
			<p><span>分类：</span><input type="text" name="classify" id="classify" value="" /></p>
			<p><span>图片：</span><input type="text" name="img" id="img" value="" /></p>
			<input type="button" name="tj" id="tj" value="添加" style="width: 66px;height: 33px;font-size: 15px;margin-top: 10px;margin-left: 207px;" />
		</div>
		<div id="liulan">
			<table border="1" cellspacing="0" cellpadding="0" id="a001">
				<th>图片</th>
				<th>书名</th>
				<th>价格</th>
				<th>会员价</th>
				<th>校园价</th>
				<th>评分</th>
				<th>作者</th>
				<th>出版社</th>
				<th>上架时间</th>
				<th>出版时间</th>
				<th>版本</th>
				<th>分类</th>
				<th>操作</th>
			</table>
		</div>
		<div id="grxx1">
			<p><img src="img/user.png" /></p>
			<p><button id="zhux">注销</button></p>
		</div>
		<div id="xgx">
			<p><span>书名：</span><input type="text" name="xgxm" id="xgxm" value="" /></p>
			<p><span>价格：</span><input type="text" name="xgjg" id="xgjg" value="" /></p>
			<p><span>会员价：</span><input type="text" name="xghy" id="xghy" value="" /></p>
			<p><span>校园价：</span><input type="text" name="xgxx" id="xgxx" value="" /></p>
			<p><span>评分：</span><input type="text" name="xgpf" id="xgpf" value="" /></p>
			<p><span>作者：</span><input type="text" name="xgzz" id="xgzz" value="" /></p>
			<p><span>出版社：</span><input type="text" name="xgcbs" id="xgcbs" value="" /></p>
			<p><span>上架时间：</span><input type="text" name="xgsj" id="xgsj" value="" /></p>
			<p><span>出版时间：</span><input type="text" name="xgcb" id="xgcb" value="" /></p>
			<p><span>版本：</span><input type="text" name="xgbb" id="xgbb" value="" /></p>
			<p><span>分类：</span><input type="text" name="xgfl" id="xgfl" value="" /></p>
			<p><span>图片：</span><input type="text" name="xgtp" id="xgtp" value="" /></p>
			<input type="button" name="qr" id="qr" value="确认" style="width: 66px;height: 33px;font-size: 15px;margin-top: 10px;margin-left: 207px;" />
		</div>
	</body>
	<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//点击添加按钮
		$("#btn").on("click", function() {
				$("#tianjia").css("display", "block")
			})
			//缺项时不添加完整时添加
		$("#tj").on("click", function() {
				//如果所有信息不为空的情况下
				if (booksname.value && cost.value && vipcost.value && schoolcost.value && grade.value && author.value && press.value && img.value && toptime.value && outtime.value && release.value && classify.value) {
					//点击添加信息
					var xinxi = {
						booksname: booksname.value,
						cost: cost.value,
						vipcost: vipcost.value,
						schoolcost: schoolcost.value,
						grade: grade.value,
						author: author.value,
						press: press.value,
						img: img.value,
						toptime: toptime.value,
						outtime: outtime.value,
						release: release.value,
						classify: classify.value,
					}
					$.post("http://localhost:10010/book", xinxi, function(data) {
							//				console.log( data )
						})
						//同时让div隐藏 所有文本框隐藏
					$("#tianjia").css("display", "none")
						//所有的对话框为空
					booksname.value = "";
					cost.value = "";
					vipcost.value = "";
					schoolcost.value = "";
					grade.value = "";
					author.value = "";
					press.value = "";
					img.value = "";
					toptime.value = "";
					outtime.value = "";
					release.value = "";
					classify.value = "";
				} else {
					alert("请仔细检查填写内容是否正确")
				}

			})
			//点击刷新按钮
		$("#f5").on("click", function() {
			$("tbody td").remove();
			//获取信息
			$.get("http://localhost:10010/book", function(data) {
				//把信息添加到浏览项上
				for (var i = 0; i < data.length; i++) {
					var tr = $("<tr><td><img src=" + data[i].img + "/></td><td>" + data[i].booksname + "</td><td>" + data[i].cost + "</td><td>" + data[i].vipcost + "</td><td>" + data[i].schoolcost + "</td><td>" + data[i].grade + "</td><td>" + data[i].author + "</td><td>" + data[i].press + "</td><td>" + data[i].toptime + "</td><td>" + data[i].outtime + "</td><td>" + data[i].release + "</td><td>" + data[i].classify + "</td><td><button class='xiug'>修改</button><button class='del'>删除<span class='aaa'>" + data[i].id + "</span></button></td></tr>").appendTo("tbody");
					//					console.log(tr);
					tr[0].bookid = data[i].id;
					//					console.log(tr[0].bookid);

				}
				//点击删除事件
				$(".del").on("click", function() {
						$(this).parent().parent().remove();
						$.ajax({
							url: "http://localhost:10010/book/" + $(this).children().html(),
							type: "delete",
							success: function(cg) {
								console.log(cg);
							},
							error: function(sb) {
								console.log(sb)
							}
						})
					})
					//点击修改
				$(".xiug").on("click", function() {
					$("#xgx").css("display", "block")
					$("#xgxm").val($(this).parents("tr").children().eq(1).html())
					$("#xgjg").val($(this).parents("tr").children().eq(2).html())
					$("#xghy").val($(this).parents("tr").children().eq(3).html())
					$("#xgxx").val($(this).parents("tr").children().eq(4).html())
					$("#xgpf").val($(this).parents("tr").children().eq(5).html())
					$("#xgzz").val($(this).parents("tr").children().eq(6).html())
					$("#xgcbs").val($(this).parents("tr").children().eq(7).html())
					$("#xgsj").val($(this).parents("tr").children().eq(8).html())
					$("#xgcb").val($(this).parents("tr").children().eq(9).html())
					$("#xgbb").val($(this).parents("tr").children().eq(10).html())
					$("#xgfl").val($(this).parents("tr").children().eq(11).html())
					$("#xgtp").val($(this).parents("tr").children().eq(0).children().attr("src"))
						//					console.log($(this).parents("tr"));
						//					console.log( $(this).parents("tr")[0].bookid );
					var bookID = $(this).parents("tr")[0].bookid;
					//提交服务器
					$("#qr").on("click", function() {
						//						var idi = $(this).next().children().html();
						//						console.log(idi)
						var xxx = {
								booksname: xgxm.value,
								cost: xgjg.value,
								vipcost: xghy.value,
								schoolcost: xgxx.value,
								grade: xgpf.value,
								author: xgzz.value,
								press: xgcbs.value,
								img: xgtp.value,
								toptime: xgsj.value,
								outtime: xgcb.value,
								release: xgbb.value,
								classify: xgfl.value,
							}
							//							console.log(bookID);
						$.ajax({
							type: "put",
							url: "http://localhost:10010/book/" + bookID,
							data: xxx,
							success: function(data02) {
								console.log(data02)
								var tr01 = $("<tr><td><img src=" + data02.img + "></td><td>" + data02.booksname + "</td><td>" + data02.cost + "</td><td>" + data02.vipcost + "</td><td>" + data02.schoolcost + "</td><td>" + data02.grade + "</td><td>" + data02.author + "</td><td>" + data02.press + "</td><td>" + data02.toptime + "</td><td>" + data02.outtime + "</td><td>" + data02.release + "</td><td>" + data02.classify + "</td><td><button class='xiug'>修改</button><button class='del'>删除<span class='aaa'>" + data02.id + "</span></button></td></tr>");
								$(this).parents("tr").replaceWith(tr01);
							},
							error: function(asd) {
								console.log(asd)
							}
						});
						$("#xgx").css("display", "none")
					})

				})
			})
		})

		$(".grxx").on("click", function() {
				$("#grxx1").slideToggle(1000)

			})
			//点击注销
		$("#zhux").on("click", function() {
			$.ajax({
				type: "post",
				url: "http://localhost:10010/dashboard/users/api/",
				success: function(data) {
					location.href = "登录界面.html";
				},
				error: function(a) {
					console.log(a)
				}
			});
		})
	</script>

</html>